<%@ page contentType="text/html;charset=UTF-8" language="java"  pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>文章详情</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Free HTML5 Website Template by freehtml5.co" />
    <meta name="keywords" content="free website templates, free html5, free template, free bootstrap, free website template, html5, css3, mobile first, responsive" />
    <meta name="author" content="freehtml5.co" />



    <!-- Facebook and Twitter integration -->
    <meta property="og:title" content=""/>
    <meta property="og:image" content=""/>
    <meta property="og:url" content=""/>
    <meta property="og:site_name" content=""/>
    <meta property="og:description" content=""/>
    <meta name="twitter:title" content="" />
    <meta name="twitter:image" content="" />
    <meta name="twitter:url" content="" />
    <meta name="twitter:card" content="" />

    <!--字体图标-->
    <link href="${pageContext.request.contextPath}/static/javaex/pc/css/icomoon.css" rel="stylesheet" />
    <!--动画-->
    <link href="${pageContext.request.contextPath}/static/javaex/pc/css/animate.css" rel="stylesheet" />
    <!--jquery，不可修改版本-->
    <script src="${pageContext.request.contextPath}/static/javaex/pc/lib/jquery-1.7.2.min.js"></script>
    <!--全局动态修改-->
    <script src="${pageContext.request.contextPath}/static/javaex/pc/js/common.js"></script>
    <!--核心组件-->
    <script src="${pageContext.request.contextPath}/static/javaex/pc/js/javaex.min.js"></script>
    <!--表单验证-->
    <script src="${pageContext.request.contextPath}/static/javaex/pc/js/javaex-formVerify.js"></script>

    <link href="https://fonts.googleapis.com/css?family=Work+Sans:300,400,500,700,800" rel="stylesheet">

    <!-- Animate.css -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/portStyle/css/animate.css">
    <!-- Icomoon Icon Fonts-->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/portStyle/css/icomoon.css">
    <!-- Bootstrap  -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/portStyle/css/bootstrap.css">

    <!-- Theme style  -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/portStyle/css/style.css">

    <!-- Modernizr JS -->
    <script src="${pageContext.request.contextPath}/static/portStyle/js/modernizr-2.6.2.min.js"></script>
    <!-- FOR IE9 below -->
    <!--[if lt IE 9]>
    <script src="${pageContext.request.contextPath}/static/portStyle/js/respond.min.js"></script>
    <![endif]-->
</head>
<body class="single">

<div class="fh5co-loader"></div>

<div id="page">
    <div id="fh5co-aside" style="background-image: url(${pageContext.request.contextPath}/static/portStyle/images/image_2.jpg)" data-stellar-background-ratio="0.5">
        <div class="overlay"></div>
        <nav role="navigation">
            <ul>
                <li><a href="${pageContext.request.contextPath}/front/index.action"><i class="icon-home"></i></a></li>
            </ul>
        </nav>
        <div class="page-title" >
            <img src="/upload/${article.cover}">
            <span>${article.updateTime}</span>
            <span class="fh5co-post-date">${article.viewCount}</span>
            <h2>${article.title}</h2>
        </div>
    </div>

    <%--隐藏域--%>
    <input type="hidden" id="id" name="id" value="${article.id}"/>
    <%--游客的id--%>
    <%--<input type="hidden" id="userId" name="userId" value="${user.id}"/>--%>
    <div id="fh5co-main-content">
        <div class="fh5co-post">
            <div class="fh5co-entry padding" id="edits">
                ${article.content}
            </div>
            <div id="comment">
                <p >评论区</p>

                <h3><strong>发表评论:</strong></h3>
                <textarea id="texthelpblock" class="form-control" rows="3" value="${article.comment}">
        </textarea>
                <p class="text-right"><button type="button" class="btn btn-primary btn-xs" onclick="comment()">提交评论</button></p>
            </div>
        </div>
    </div>

</div>


<div class="gototop js-top">
    <a href="#" class="js-gotop"><i class="icon-arrow-up"></i></a>
</div>

<%--<!-- jQuery -->--%>
<%--<script src="${pageContext.request.contextPath}/static/portStyle/js/jquery.min.js"></script>--%>
<%--<!-- jQuery Easing -->--%>
<%--<script src="${pageContext.request.contextPath}/static/portStyle/js/jquery.easing.1.3.js"></script>--%>
<!-- Bootstrap -->
<script src="${pageContext.request.contextPath}/static/portStyle/js/bootstrap.min.js"></script>
<!-- Waypoints -->
<script src="${pageContext.request.contextPath}/static/portStyle/js/jquery.waypoints.min.js"></script>
<!-- Stellar Parallax -->
<script src="${pageContext.request.contextPath}/static/portStyle/js/jquery.stellar.min.js"></script>
<!-- Main -->
<script src="${pageContext.request.contextPath}/static/portStyle/js/main.js"></script>

</body>
<%--<script>--%>
    <%--//默认文本--%>
    <%--var content = '${article.content}';--%>


    <%--//文本域--%>
    <%--javaex.edit({--%>
        <%--id : "edit",--%>
        <%--image : {--%>
            <%--url : "upload.json",	// 请求路径--%>
            <%--param : "file",		// 参数名称，SSM中与MultipartFile的参数名保持一致--%>
            <%--dataType : "url",	// 返回的数据类型：base64 或 url--%>
            <%--rtn : "rtnData",	// 后台返回的数据对象，在前面页面用该名字存储--%>
            <%--imgUrl : "data.imgUrl",	// 根据返回的数据对象，获取图片地址。  例如后台返回的数据为：{code: "000000", message: "操作成功！", data: {imgUrl: "1.jpg"}}--%>
            <%--prefix : "/upload/"	// 图片地址的前缀，根据实际情况决定是否需要填写--%>
        <%--},--%>
        <%--content : '${article.content}',	// 这里必须是单引号，因为html代码中都是双引号，会产生冲突--%>
        <%--callback : function(rtn) {--%>
            <%--console.log('调用');--%>
            <%--$("#content").val(rtn.html);--%>
            <%--/*截取文本的前一百个字符*/--%>
            <%--$("#contentText").val(rtn.text.substring(0,100));--%>
            <%--//console.log(rtn.text.substring(0,10));--%>
        <%--}--%>
    <%--});--%>
<%--</script>--%>

<script >

    //提交评论
    function comment(){
        //获取评论内容
        var $textValue = $('#texthelpblock').val();

        console.log('text:', $textValue);
        //发送ajax请求，传递的参数是文章的id，用户id, 评论的内容

        $.ajax({
            url : "${pageContext.request.contextPath}/comment.json",
            type : "POST",
            dataType : "json",
            data : {
                "id" : id,
                "name" : name
            },
            success : function(rtn) {

            },
            error : function(rtn) {

            }
        });

    }



</script>
</html>
